<template>
  <div class="register-container">
    <div class="logo">
      <h1>OST 云端网盘</h1>
    </div>
    <div class="top-right">
      <ul>
        <li>
          <router-link to="/" class="link">云端首页</router-link>
        </li>
        <li>
          <router-link to="/contact" class="link">联系我们</router-link>
        </li>
      </ul>
    </div>

    <!-- 协议模态框 -->
    <div v-if="showAgreement" class="agreement-modal" @click.self="closeAgreement">
      <div class="agreement-content">
        <h2 class="modal-title">OST云盘用户协议</h2>
        <div class="agreement-text">
          <p>欢迎使用OST云盘服务！请仔细阅读以下协议内容：</p>

          <h3>一、服务内容</h3>
          <p>1. OST云盘为用户提供文件存储、同步、分享等云存储服务。<br>
            2. 免费用户可获得10GB初始存储空间，可通过任务扩容。</p>

          <h3>二、用户责任</h3>
          <p>1. 不得上传传播非法、侵权、色情内容。<br>
            2. 妥善保管账号信息，对账户下所有行为负责。<br>
            3. 分享文件时需遵守相关法律法规。</p>

          <h3>三、隐私保护</h3>
          <p>1. 我们采用加密技术保护用户文件隐私<br>
            2. 未经用户同意不查看、泄露用户存储内容<br>
            3. 完整隐私政策请参见专门页面</p>

          <h3>四、免责声明</h3>
          <p>1. 对不可抗力导致的服务中断不承担责任<br>
            2. 用户自行对重要文件进行本地备份<br>
            3. 反对任何形式的文件侵权盗版行为</p>

          <h3>五、其他条款</h3>
          <p>1. 本协议解释权归OST云盘所有<br>
            2. 协议更新时间：2025年5月<br>
            3. 继续使用即表示接受本协议条款</p>
        </div>
        <div class="modal-footer">
          <button class="close-btn" @click="closeAgreement">关闭协议</button>
        </div>
      </div>
    </div>

    <!-- 注册主内容 -->
    <div class="register-main">

      <div class="register-card">
        <h2 class="register-title">注册OST云盘</h2>
        <form @submit.prevent="handleSubmit">
          <!-- 表单分组优化 -->
          <div class="form-group">
            <input
                type="text"
                v-model="formData.username"
                placeholder="请输入用户名"
                :class="{ 'is-error': formErrors.username }"
            />
            <div v-if="formErrors.username" class="error-message">{{ formErrors.username }}</div>
          </div>

          <div class="form-group">
            <input
                type="email"
                v-model="formData.email"
                placeholder="请输入邮箱"
                :class="{ 'is-error': formErrors.email }"
            />
            <div v-if="formErrors.email" class="error-message">{{ formErrors.email }}</div>
          </div>

          <div class="form-group">
            <input
                type="password"
                v-model="formData.password"
                placeholder="请输入密码"
                :class="{ 'is-error': formErrors.password }"
            />
            <div v-if="formErrors.password" class="error-message">{{ formErrors.password }}</div>
          </div>

          <div class="form-group">
            <input
                type="password"
                v-model="formData.confirmPassword"
                placeholder="请确认密码"
                :class="{ 'is-error': formErrors.confirmPassword }"
            />
            <div v-if="formErrors.confirmPassword" class="error-message">{{ formErrors.confirmPassword }}</div>
          </div>

          <div class="agree-group">
            <label class="checkbox-label">
              <input
                  type="checkbox"
                  v-model="formData.agree"
                  :class="{ 'is-error': formErrors.agree }"
              />
              <span>我已阅读并同意</span>
              <span>《</span><a href="javascript:;" @click.stop="showAgreement = true" class="protocol-link">OST用户协议</a><span>》</span>
            </label>
            <div v-if="formErrors.agree" class="error-message">请确认用户协议</div>
          </div>

          <button
              type="submit"
              class="register-btn"
              :disabled="isSubmitting"
          >
            {{ isSubmitting ? '注册中...' : '立即注册' }}
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import router from "@/router";

const showAgreement = ref(false);
const formData = ref({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  agree: false,
});
const formErrors = ref({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  agree: ''
});
const isSubmitting = ref(false);

// 表单验证
const validateForm = () => {
  const newErrors = {
    username: formData.value.username.length < 3 ? '用户名至少3位' : '',
    email: !/\S+@\S+\.\S+/.test(formData.value.email) ? '请输入有效邮箱' : '',
    password: formData.value.password.length < 6 ? '密码至少6位' : '',
    confirmPassword: formData.value.password !== formData.value.confirmPassword ? '密码不一致' : '',
    agree: !formData.value.agree ? '请同意用户协议' : ''
  };
  formErrors.value = newErrors;
  return Object.values(newErrors).every(error => !error);
};

const handleSubmit = async () => {
  if (!validateForm()) return;

  isSubmitting.value = true;
  try {
    const response = await axios.post('http://localhost:8888/api/register', {
      username: formData.value.username,
      email: formData.value.email,
      password: formData.value.password
    });

    if (response.data.code === 200) {
      alert('注册成功！');
      router.push('/login');
    } else {
      formErrors.value.username = response.data.message || '用户名已存在';
    }
  } catch (error) {
    console.error('注册失败:', error);
    formErrors.value.email = '注册失败，请重试';
  } finally {
    isSubmitting.value = false;
  }
};

const closeAgreement = () => {
  showAgreement.value = false;
};
</script>

<style scoped>
/* 全局布局 */
.register-container {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  background: #f0f2f5 url('../assets/imgs/loginBackgroundImg.png') no-repeat center;
  background-size: cover;
  margin: 0;
  padding: 20px;
}

.logo {
  position: absolute;
  top: 20px;
  left: 40px;
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.top-right {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.top-right ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
}
.top-right li {
  margin-right: 20px;
  color: white;
}
.top-right li .link:hover {
  color: #409EFF;
}

/* 注册卡片 */
.register-main {
  width: 100%;
  max-width: 400px;
  padding: 30px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-left: 55%;
}

.register-title {
  text-align: center;
  margin-bottom: 25px;
  color: #1a73e8;
  font-size: 24px;
  font-weight: 500;
}

/* 表单样式 */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #dfe1e5;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s;
}

input:focus {
  outline: none;
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

input.is-error {
  border-color: #ff4444;
}

.error-message {
  color: #ff4444;
  font-size: 12px;
  margin-top: 4px;
}

/* 复选框组 */
.agree-group {
  margin: 20px 0;
  font-size: 14px;
  color: #666;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-label input {
  width: 20px;
  height: 20px;
  accent-color: #1a73e8;
}

.protocol-link {
  color: #1a73e8;
  text-decoration: none;
  font-weight: 500;
}

.protocol-link:hover {
  text-decoration: underline;
}

/* 按钮样式 */
.register-btn {
  width: 100%;
  height: 35px;
  background-color: #1a73e8;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-top: 25px;
}

.register-btn:hover:enabled {
  background-color: #5e95e1;
}

.register-btn:disabled {
  background-color: #e0e0e0;
  cursor: not-allowed;
}

/* 协议模态框 */
.agreement-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.agreement-content {
  background: white;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  padding: 30px;
  border-radius: 12px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.modal-title {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
  font-size: 18px;
  font-weight: 500;
}

.agreement-text {
  line-height: 1.6;
  color: #666;
  font-size: 14px;
}

.agreement-text h3 {
  color: #333;
  margin: 20px 0 10px;
  font-size: 16px;
  font-weight: 500;
}

.modal-footer {
  margin-top: 30px;
  text-align: center;
}

</style>